[CSS] 검색창 클릭시 아이콘 포함 테두리 생기기
March 02, 2021
리액트로 아마존 클론을 하고 있다. 헤더부분 검색창 클릭을 하면 주황 테두리가 이쁘게 딱 생기는데 의외로 쉽지 않아서 기록해본다.
마크업
<div className="header__search">
<select className="header__searchSelect">
{' '}
{/* All */}
<option value="All">All</option>
<option value="arts-craft">Arts & Craft</option>
<option value="automotive">automotive</option>
<option value="baby">baby</option>
</select>
<input type="text" className="header__searchInput" /> {/* input */}
<SearchIcon className="header__searchIcon" /> {/* 돋보기아이콘 */}
</div>참고로 돋보기 아이콘을 위한 <SearchIcon>태그는 material-ui.com 사이트를 이용했다.
npm 으로 다운받고
npm install @material-ui/core npm install @material-ui/icons
이렇게 임포트 해준다음에 사용하면 된다.
import SearchIcon from '@material-ui/icons/Search'border vs outline
input태그에 focus를 하면 자동으로 outline이 생긴다. 일단 이것부터 지워준다.
.header__searchInput:focus {
outline: none;
}border를 주면 레이아웃에 영향을 주어 모양이 이상해진다. 그래서 outline 을 사용하면 좋다. 그치만 outline-radius 가 없기 때문에 radius를 주기 위해서는 다른 방법을 써야 한다. 밑에 설명!
outline 에 radius 주기
다른말로 하면 border-radius 를 사용하면서 레이아웃이 깨지지 않게 하기 pseudo-element 를 사용해서 테두리를 만들어준다.
.header__search:focus::before {
content: '';
display: block;
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
border: 2px solid orange;
border-radius: 3px;
}-1px를 상하좌우에 줬는데 이렇게 해야 테두리가 바깥에 생긴다.
focus-within
input:focus 일 때 전체 div 에 테두리 주기. focus-within 사용해야 input, 즉 적용하려는 div 의 안쪽을 클릭해도 focus 인식이 된다.
전체코드
.header__search:focus-within::before {
content: '';
display: block;
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
border: 2px solid orange;
border-radius: 3px;
}